<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>pixijs</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    canvas {
      background: #eee;
    }
  </style>
</head>

<body>
  <!-- http://localhost:8989/pixijs/demo_2.html -->

  <script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/5.1.3/pixi.min.js"></script>
  <script>
    // http://pixijs.download/release/docs/PIXI.Application.html

    let app = new PIXI.Application({
      width: window.innerWidth,
      height: window.innerHeight,
      antialias: true,
      transparent: false,
      resolution: 1,
      autoDensity: true,
      resizeTo: window
    })

    // app.renderer.view.style.position = 'absolute';
    // app.renderer.view.style.display = 'block';

    document.body.appendChild(app.view);

    const texture = PIXI.Texture.from('../mario/assets/Mario/stop.png');
    const img = new PIXI.Sprite(texture);

    img.x = app.renderer.width / 2
    img.y = app.renderer.height / 2

    img.anchor.x = 0.5;
    img.anchor.y = 0.5;
    img.width = 100;
    img.height = 100;

    app.stage.addChild(img);

    const blurFilter = new PIXI.filters.BlurFilter();
    img.filters = [blurFilter];

    let count = 0;
    app.ticker.add(() => {
      count += 0.01;
      blurFilter.blur = 20*(Math.sin(count));
    })
  </script>
</body>

</html>